<template>
  <div class="rank-list">
    <div>
      <div class="list-item" v-for="item in rankList" :key="item.topId" @click.stop="selectRank(item)">
        <div class="img">
          <img v-lazy="item.picUrl" />
        </div>
        <ul>
          <li v-for="(list, index) in item.song" :key="index">
            {{ ++index }}. {{ list.title }}
          </li>
        </ul>
      </div>
    </div>
    <div>
      <van-loading type="spinner" vertical v-if="!rankList.length"
        >数据加载中...</van-loading
      >
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import { playListMixin } from '../../common/js/mixin'
export default {
  // mixins: [playListMixin], // 组件同名方法可以覆盖mixin方法
  props: {
    rankList: {
      type: Array
    }
  },
  methods: {
    ...mapMutations(['setRank', 'setType']),
    selectRank (rankDate) {
      this.setRank(rankDate)
      this.setType('排行')
      this.$router.push('/rank/id=' + rankDate.topId)
    }
  }
}
</script>

<style lang="stylus" scoped>
.rank-list {
  padding: 0 20px;
  .list-item {
    display: flex;
    padding-bottom: 20px;
    .img {
      img {
        display: block;
        width: 100px;
        height: 100px;
      }
    }
    ul {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 20px;
      overflow: hidden;
      background: #333;
      li {
        font-size: 12px;
        color: #6d6d6d;
        width: 100%;
        line-height: 26px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .van-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
